<template>
  <div class="path-selector">
    <el-input
      v-model="currentPath"
      placeholder="输入文件路径"
      :prefix-icon="Folder"
      @keyup.enter="confirmPath"
    >
      <template #append>
        <el-button @click="browsePath" :icon="FolderOpened">浏览</el-button>
      </template>
    </el-input>
    
    <div class="path-suggestions" v-if="suggestions.length">
      <el-text size="small" type="info">建议路径:</el-text>
      <div class="suggestions-list">
        <el-tag
          v-for="suggestion in suggestions"
          :key="suggestion"
          @click="selectSuggestion(suggestion)"
          class="suggestion-tag"
          size="small"
        >
          {{ suggestion }}
        </el-tag>
      </div>
    </div>
    
    <div class="recent-paths" v-if="recentPaths.length">
      <el-text size="small" type="info">最近使用:</el-text>
      <div class="recent-list">
        <el-tag
          v-for="path in recentPaths"
          :key="path"
          @click="selectSuggestion(path)"
          class="recent-tag"
          size="small"
          type="info"
        >
          {{ path }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Folder, FolderOpened } from '@element-plus/icons-vue'

interface Props {
  modelValue: string
  originalPath?: string
  placeholder?: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'browse'): void
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '输入文件路径'
})

const emit = defineEmits<Emits>()

const currentPath = ref(props.modelValue)

// Mock recent paths - in real app this would come from localStorage
const recentPaths = ref([
  'src/components/',
  'src/views/',
  'src/utils/',
  'src/services/'
])

const suggestions = computed(() => {
  if (!props.originalPath) return []
  
  const fileName = props.originalPath.split('/').pop() || ''
  const basePaths = [
    'src/',
    'src/components/',
    'src/views/',
    'src/utils/',
    'src/services/',
    'src/stores/',
    'src/types/'
  ]
  
  return basePaths
    .map(base => base + fileName)
    .filter(path => path !== currentPath.value)
})

const selectSuggestion = (path: string) => {
  currentPath.value = path
  emit('update:modelValue', path)
}

const browsePath = () => {
  emit('browse')
}

const confirmPath = () => {
  emit('update:modelValue', currentPath.value)
}

watch(() => props.modelValue, (newValue) => {
  currentPath.value = newValue
})

watch(currentPath, (newValue) => {
  emit('update:modelValue', newValue)
})
</script>

<style scoped>
.path-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.path-suggestions,
.recent-paths {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestions-list,
.recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.suggestion-tag,
.recent-tag {
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-tag:hover {
  background-color: var(--el-color-primary-light-7);
}

.recent-tag:hover {
  background-color: var(--el-color-info-light-7);
}
</style>